<template>
	<div :class="[..._itemClass, 'itemContent']">
		<template v-if="_type === 'empty'"></template>
		<template v-else-if="_type === 'dict'">
			<span v-on="_handleEvents">
				{{ translateDictLabel(dictList, formData[prop]).value }}
			</span>
		</template>

		<template
			v-else-if="
				itemConfig.format &&
				(itemState === 'readonly' ||
					hasOwnPrototype(itemConfig, 'type') === false ||
					_type === 'text')
			">
			<TooltipDiv
				v-if="showOverflowTooltip"
				:content="
					itemConfig.format({
						row: formData,
						val: _.cloneDeep(formData[prop]),
						index: index,
					})
				"
				v-on="_handleEvents"></TooltipDiv>
			<div v-else class="textContent" v-on="_handleEvents">
				{{
					itemConfig.format({
						row: formData,
						val: _.cloneDeep(formData[prop]),
						index: index,
					}) | _setEmpty
				}}
			</div>
		</template>
		<!-- select_dialog -->
		<template
			v-else-if="_type === 'select_dialog' && itemState === 'readonly'">
			<TooltipDiv
				v-if="showOverflowTooltip"
				:content="formData[itemConfig.propLabel]"
				v-on="_handleEvents"></TooltipDiv>
			<div v-else class="textContent" v-on="_handleEvents">
				{{ formData[itemConfig.propLabel] | _setEmpty }}
			</div>
		</template>
		<template
			v-else-if="
				(_type === 'select' ||
					_type === 'radioGroup' ||
					_type === 'checkboxGroup') &&
				itemState === 'readonly'
			">
			<TooltipDiv
				v-if="showOverflowTooltip"
				v-on="_handleEvents"
				:content="
					computedSelectLabel(dictList, formData[prop])
				"></TooltipDiv>
			<div v-else class="textContent" v-on="_handleEvents">
				{{ computedSelectLabel(dictList, formData[prop]) | _setEmpty }}
			</div>
		</template>
		<template v-else-if="_type === 'checkbox' && itemState === 'readonly'">
			<div class="textContent" v-on="_handleEvents">
				<i v-if="getCheckboxState() === true" class="el-icon-check"></i>
				<i
					v-if="getCheckboxState() === false"
					class="el-icon-close"></i>
			</div>
		</template>
		<!-- upload -->
		<template v-else-if="_type === 'upload'">
			<!-- <Upload -->
			<!-- ref="upload" -->
			<!-- :disabled="itemState === 'disabled'" -->
			<!-- v-model="formData[prop]" -->
			<!-- v-bind="prototype" -->
			<!-- :size="itemConfig.size || 'small'" -->
			<!-- @[eventType]="eventCb(formData)" -->
			<!-- @uploadEnd="uploadEnd" -->
			<!-- > -->
			<!-- </Upload> -->
			<image-common
				v-model="formData[prop]"
				:disabled="itemState === 'disabled' || itemState === 'readonly'"
				:upType="2"
				v-bind="prototype"
				@uploadEnd="uploadEnd" />
		</template>
		<template
			v-else-if="
				(_type === 'price' || itemConfig.tag === 'price') &&
				itemState === 'readonly'
			">
			<TooltipDiv
				v-if="showOverflowTooltip"
				v-on="_handleEvents"
				:content="thousands(formData[prop])"></TooltipDiv>
			<div v-on="_handleEvents" class="textContent">
				{{ thousands(formData[prop]) }}
			</div>
		</template>
		<template v-else-if="itemState === 'readonly'">
			<TooltipDiv
				v-if="showOverflowTooltip"
				v-on="_handleEvents"
				:content="formData[prop]"></TooltipDiv>
			<div v-else class="textContent" v-on="_handleEvents">
				{{ formData[prop] | _setEmpty }}
			</div>
		</template>
		<template
			v-else-if="
				_type === 'text' ||
				hasOwnPrototype(itemConfig, 'type') === false
			">
			<TooltipDiv
				v-if="showOverflowTooltip"
				:content="formData[prop]"
				v-on="_handleEvents"></TooltipDiv>
			<div v-else class="textContent" v-on="_handleEvents">
				{{ formData[prop] | _setEmpty }}
			</div>
		</template>
		<template v-else-if="_type === 'input'">
			<el-input
				:placeholder="placeholder"
				:disabled="itemState === 'disabled'"
				v-model="formData[prop]"
				clearable
				:size="itemConfig.size || 'small'"
				v-bind="prototype"
				v-on="_handleEvents"></el-input>
		</template>
		<!-- select -->

		<template v-else-if="_type === 'select'">
			<el-select
				:placeholder="placeholder"
				:disabled="itemState === 'disabled'"
				v-model="formData[prop]"
				clearable
				filterable
				:size="itemConfig.size || 'small'"
				v-on="_handleEvents"
				v-bind="prototype">
				<el-option
					v-for="ele in dictList"
					:key="dictOptionsKey(ele).value"
					:label="dictOptionsLabel(ele).value"
					:value="dictOptionsValue(ele).value"
					:disabled="dictOptionsDisabled(ele).value"></el-option>
			</el-select>
		</template>
		<!-- select -->
		<template v-else-if="_type === 'selectRaw'">
			<el-select
				v-model="formData[prop]"
				:placeholder="placeholder"
				:disabled="itemState === 'disabled'"
				:value-key="itemConfig.valueKey || 'value'"
				clearable
				filterable
				:size="itemConfig.size || 'small'"
				v-bind="prototype"
				v-on="_handleEvents">
				<el-option
					v-for="ele in dictList"
					:key="dictOptionsKey(ele).value"
					:label="dictOptionsLabel(ele).value"
					:value="ele"
					:disabled="dictOptionsDisabled(ele).value"></el-option>
			</el-select>
		</template>
		<!-- switch -->
		<template v-else-if="_type === 'switch'">
			<el-switch
				:disabled="itemState === 'disabled'"
				v-model="formData[prop]"
				:active-color="this.itemConfig.activeColor || '#13ce66'"
				:inactive-color="this.itemConfig.inactiveColor || '#ff4949'"
				:size="itemConfig.size || 'small'"
				v-bind="prototype"
				v-on="_handleEvents"></el-switch>
		</template>

		<!-- textarea -->
		<template v-else-if="_type === 'textarea'">
			<el-input
				:disabled="itemState === 'disabled'"
				:autosize="{
					minRows: prototype.minRows || 3,
					maxRows: prototype.maxRows || 3,
				}"
				type="textarea"
				clearable
				:placeholder="placeholder"
				v-model="formData[prop]"
				:resize="prototype.resize || 'none'"
				show-word-limit
				:maxlength="prototype.maxlength"
				:size="prototype.size || 'small'"
				v-bind="prototype"
				v-on="_handleEvents"></el-input>
		</template>
		<!-- select_dialog -->
		<template v-else-if="_type === 'select_dialog'">
			<el-input
				:disabled="itemState === 'disabled'"
				:placeholder="placeholder"
				v-model="formData[itemConfig.propLabel]"
				@focus="select_dialog"
				ref="selectDialogInput"
				:size="itemConfig.size || 'small'"
				clearable
				@clear="clear"
				v-bind="prototype"
				v-on="_handleEvents"></el-input>
		</template>
		<!-- datePicker -->
		<template v-else-if="_type === 'datePicker'">
			<el-date-picker
				v-model="formData[prop]"
				clearable
				:type="datePicker.type || 'date'"
				:format="datePicker.labelformat"
				:placeholder="placeholder"
				:disabled="itemState === 'disabled'"
				:value-format="datePicker.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
				:picker-options="pickerOptions(formData)"
				:size="itemConfig.size || 'small'"
				v-bind="prototype"
				v-on="_handleEvents"></el-date-picker>
		</template>
		<!-- radioGroup -->
		<template v-else-if="_type === 'radioGroup'">
			<el-radio-group
				v-model="formData[prop]"
				v-bind="prototype"
				v-on="_handleEvents">
				<el-radio
					v-for="ele in dictList"
					:key="dictOptionsValue(ele).value"
					:label="dictOptionsLabel(ele).value"
					:disabled="
						dictOptionsDisabled(ele).value ||
						itemState === 'disabled'
					">
					{{ dictOptionsLabel(ele).value }}
				</el-radio>
			</el-radio-group>
		</template>
		<!-- checkbox -->
		<template v-else-if="_type === 'checkbox'">
			<el-checkbox
				v-model="formData[prop]"
				:disabled="itemState === 'disabled' || itemState === 'readonly'"
				v-bind="prototype"
				v-on="_handleEvents"></el-checkbox>
		</template>
		<!-- checkboxGroup -->
		<template v-else-if="_type === 'checkboxGroup'">
			<el-checkbox-group
				v-if="dictList.length > 0"
				v-model="formData[prop]"
				v-bind="prototype"
				v-on="_handleEvents">
				<el-checkbox
					v-for="ele in dictList"
					:key="dictOptionsValue(ele).value"
					:label="dictOptionsValue(ele).value"
					:disabled="
						dictOptionsDisabled(ele).value ||
						itemState === 'disabled'
					">
					{{ dictOptionsLabel(ele).value }}
				</el-checkbox>
			</el-checkbox-group>
		</template>
		<template v-else-if="_type === 'input_number'">
			<el-input-number
				:placeholder="placeholder"
				:disabled="itemState === 'disabled'"
				v-model.number="formData[prop]"
				clearable
				step-strictly
				:min="_min"
				:max="_max"
				:size="itemConfig.size || 'small'"
				v-bind="prototype"
				v-on="_handleEvents"></el-input-number>
		</template>
		<template v-else-if="_type === 'price'">
			<!-- <Price -->
			<!-- :placeholder="placeholder" -->
			<!-- :disabled="itemState === 'disabled'" -->
			<!-- v-model="formData[prop]" -->
			<!-- clearable -->
			<!-- :min="_min" -->
			<!-- :max="_max" -->
			<!-- :size="itemConfig.size || 'small'" -->
			<!-- v-bind="prototype" -->
			<!-- :handleEvents="_handleEvents" -->
			<!-- :formData="formData" -->
			<!-- :thousands="thousands" -->
			<!-- :index="index"></Price> -->
			<el-input-number
				:placeholder="placeholder"
				:disabled="itemState === 'disabled'"
				v-model.number="formData[prop]"
				clearable
				step-strictly
				:min="_min"
				:max="_max"
				:size="itemConfig.size || 'small'"
				v-bind="prototype"
				v-on="_handleEvents"></el-input-number>
		</template>
		<template v-if="hasOwnPrototype(itemConfig, 'slot')">
			<template v-for="slotName in _slots">
				<slot
					:name="slotName"
					v-if="hasOwnPrototype($slots, slotName)"></slot>
			</template>
			<template v-for="slotName in _slots">
				<slot
					:name="slotName"
					:row="formData || {}"
					:[`$index`]="index"
					v-if="hasOwnPrototype($scopedSlots, slotName)"></slot>
			</template>
		</template>
	</div>
</template>
<script>
	import { useComputed } from '@/utils/hooks';
	import Upload from '@/components/FileUpload/pictureCard.vue';
	import Price from '@/components/A/A-form/price/index.vue';
	import TooltipDiv from '@/components/A/A-form/tooltipDiv/index.vue';

	export default {
		components: { Upload, TooltipDiv, Price },
		props: {
			value: {
				type: Object,
				default: () => ({}),
			},
			config: {
				type: Object,
				default: () => {},
			},
			state: {
				required: false,
				type: String,
				default: 'write',
			},
			fitContent: {
				type: Boolean,
				default: false,
			},
			align: {
				type: String,
			},
			index: {
				type: Number,
			},
			fromType: {
				required: false,
			},

			c_itemClass: {
				type: Array,
				required: false,
			},
		},
		data() {
			return {
				selectData: {},
				unwatch: { select: null, value: null },
			};
		},
		filters: {},
		watch: {
			selectData(val) {
				this.$set(
					this.formData,
					this.prop,
					this.dictOptionsValue(val)?.value,
				);
				this.$set(
					this.formData,
					this.itemConfig.propLabel,
					this.dictOptionsLabel(val)?.value,
				);
			},
			val: {
				handler(val, oldVal) {
					this.itemConfig?.lifeHooks?.watch?.({
						val: this._.cloneDeep(val),
						oldVal: this._.cloneDeep(oldVal),
						row: this.formData,
						val: this.val,
					});
				},
				deep: true,
				immediate: false,
			},
		},
		computed: {
			dictOptionsKey() {
				return useComputed(this.getDictKey);
			},
			dictOptionsLabel() {
				return useComputed(this.getDictLabel);
			},
			dictOptionsValue() {
				return useComputed(this.getDictValue);
			},
			dictOptionsDisabled() {
				return useComputed(this.getDictDisabled);
			},
			translateDictLabel() {
				return useComputed(this.getTranslateDictLabel);
			},

			showErrorValue() {
				let result = true;
				if (
					this.hasOwnPrototype(
						this.itemConfig?.dict,
						'showErrorValue',
					) === false
				) {
					result = true;
				} else if (
					typeof this.itemConfig?.dict?.showErrorValue === 'function'
				) {
					result = this.itemConfig?.dict?.showErrorValue({
						row: this.formData,
						val: this._.cloneDeep(this.val),
						prop: this.prop,
						index: this.index,
					});
				} else if (
					typeof this.itemConfig?.dict?.showErrorValue === 'boolean'
				) {
					result = this.itemConfig?.dict?.showErrorValue;
				} else {
					result = this.notEmpty(
						this.itemConfig?.dict?.showErrorValue,
					);
				}
				return result;
			},
			pickerOptions() {
				return this.datePicker?.pickerOptions ?? this.cb;
			},
			placeholder() {
				let message_type =
					this._type.includes('input') || this._type === 'textarea'
						? '输入'
						: '选择';
				let message_label = this.itemConfig?.label?.replace(
					/(选择|输入)/g,
					'',
				);
				let placeholder = `请${message_type}${message_label}`;
				return (
					this.itemConfig.placeholder ?? placeholder ?? '请输入内容'
				);
			},
			prop() {
				let prop = null;
				if (typeof this.itemConfig?.prop === 'function') {
					prop = this.itemConfig?.prop?.({
						row: this.formData,
						val: this._.cloneDeep(this.val),
						prop: this.prop,
						index: this.index,
					});
				} else if (typeof this.itemConfig?.prop === 'string') {
					prop = this.itemConfig?.prop;
				}
				return prop;
			},

			val: {
				get() {
					return this.formData[this.prop];
				},
				set(val) {
					this.formData[this.prop] = val;
				},
			},
			prototype() {
				return this.itemConfig?.prototype ?? {};
			},
			itemConfig: {
				get() {
					return this.useVModel.call(this, this.config, 'config');
				},
				set(val) {
					this.$emit('update:itemConfig', val);
				},
			},
			formData: {
				get() {
					// return this.value;
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('formData', val);
				},
			},
			dictList() {
				if (this.Empty(this.itemConfig?.dict?.list)) {
					return [];
				}
				let dictList = [];
				if (
					Object.prototype.toString.call(
						this.itemConfig?.dict?.list,
					) == '[object Function]'
				) {
					dictList = this.itemConfig?.dict?.list({
						row: this.formData,
						val: this._.cloneDeep(this.val),
						prop: this.prop,
						index: this.index,
					});
				} else if (Array.isArray(this.itemConfig?.dict?.list)) {
					dictList = this.itemConfig?.dict?.list;
				} else {
					dictList = [this.itemConfig?.dict?.list];
				}
				return dictList ?? [];
			},
			datePicker() {
				return this.itemConfig?.datePicker ?? {};
			},
			showOverflowTooltip() {
				let result = true;
				if (
					this.hasOwnPrototype(this.itemConfig, 'showOverflowTooltip')
				) {
					if (
						typeof this.itemConfig.showOverflowTooltip ===
						'function'
					) {
						result = this.itemConfig.showOverflowTooltip({
							row: this.formData,
							val: this._.cloneDeep(this.val),
							prop: this.prop,
							index: this.index,
						});
					} else if (
						typeof this.itemConfig.showOverflowTooltip === 'boolean'
					) {
						result = this.itemConfig.showOverflowTooltip;
					} else {
						result = !!this.itemConfig.showOverflowTooltip;
					}
				} else {
					if (this.fromType == 'formItems') {
						result = false;
					} else if (this.fromType == 'tableCloumns') {
						result = true;
					}
					if (
						this._type === 'price' ||
						this.itemConfig.tag === 'price'
					) {
						result = false;
					}
				}
				return result;
			},

			dictDisabledProp() {
				return this.itemConfig?.dictDisabled ?? 'disabled';
			},
			selectType() {
				return this.hasOwnPrototype(this.itemConfig, 'propLabel');
			},
			_handleEvents() {
				if (!this.hasOwnPrototype(this.itemConfig, 'on')) return {};
				let events = {};
				if (
					Object.prototype.toString.call(this.itemConfig?.on) ===
					'[object Object]'
				) {
					for (const [key, value] of Object.entries(
						this.itemConfig.on,
					)) {
						if (typeof value === 'function') {
							if (this.itemState == 'write') {
								events[key] = value.bind(null, {
									val: this._.cloneDeep(this.val),
									prop: this.prop,
									row: this.formData,
									index: this.index,
								});
							}
						} else if (
							Object.prototype.toString.call(value) ===
							'[object Object]'
						) {
							let state = value.state ?? 'write';
							if (this.itemState === state) {
								if (value.keepRaw === true) {
									events[key] = value.handler;
								} else {
									events[key] = value.handler.bind(null, {
										val: this._.cloneDeep(this.val),
										prop: this.prop,
										row: this.formData,
										index: this.index,
									});
								}
							}
						}
					}
				}
				return events;
			},

			_type() {
				let type = 'text';
				if (
					Object.prototype.toString.call(this.itemConfig.type) ==
					'[object String]'
				) {
					type = this.itemConfig.type;
				}
				if (
					Object.prototype.toString.call(this.itemConfig.type) ==
					'[object Function]'
				) {
					type =
						this.itemConfig.type({
							row: this.formData,
							val: this._.cloneDeep(this.val),
							prop: this.prop,
							index: this.index,
						}) ?? 'text';
				}
				return type;
			},

			_show() {
				let show = true;
				if (this.hasOwnPrototype(this.itemConfig, 'show')) {
					if (typeof this.itemConfig.show == 'function') {
						show = this.itemConfig.show({
							row: this.formData,
							val: this._.cloneDeep(this.val),
							prop: this.prop,
							index: this.index,
						});
					} else if (typeof this.itemConfig.show == 'boolean') {
						show = this.itemConfig.show;
					} else {
						show = !!this.itemConfig.show;
					}
				}
				return show;
			},
			itemState() {
				let state = 'disabled';
				let keepItemState = undefined;
				if (this.hasOwnPrototype(this.itemConfig, 'keepItemState')) {
					if (typeof this.itemConfig?.keepItemState === 'function') {
						keepItemState = this.itemConfig.keepItemState({
							row: this.formData,
							val: this._.cloneDeep(this.val),
							prop: this.prop,
							index: this.index,
						});
					} else if (
						typeof this.itemConfig?.keepItemState === 'boolean'
					) {
						keepItemState = this.itemConfig.keepItemState;
					}
				}

				if (this._show == false) {
					state = 'hidden';
				} else {
					if (typeof this.itemConfig.state == 'function') {
						state =
							this?.itemConfig?.state?.({
								row: this.formData,
								val: this._.cloneDeep(this.val),
								prop: this.prop,
								index: this.index,
							}) ??
							this.state ??
							'write';
					} else {
						state = this?.itemConfig?.state ?? this.state;
					}
					if (this.state === 'readonly' && keepItemState !== true) {
						state = 'readonly';
					}
				}

				return state;
			},
			_itemClass() {
				if (this.c_itemClass?.length > 0) return this.c_itemClass;
				let classNames = [];
				let layout = this.itemConfig?.layout ?? {};
				layout.align ??= this.align;
				if (this.state) {
					if (this.state === 'write') {
						classNames.push('columnBox');
					}
					if (this.state === 'disabled') {
						classNames.push('columnBox');
					}
					if (this.state === 'readonly') {
						classNames.push('inlineBox');
					}
				} else {
					if (layout?.inline === true) {
						classNames.push('inlineBox');
					} else {
						if (this.itemState === 'readonly') {
							classNames.push('inlineBox');
						}
					}
					if (layout?.column === true) {
						classNames.push('columnBox');
					} else {
						if (this.itemState === 'write') {
							classNames.push('columnBox');
						}
						if (this.state === 'disabled') {
							classNames.push('columnBox');
						}
					}
				}
				if (layout?.fit === true) {
					classNames.push('fitBox');
				}
				if (layout?.block === true) {
					classNames.push('blockBox');
				}
				if (layout?.flex === true) {
					classNames.push('flexBox');
				}
				if (layout?.align === 'center') {
					classNames.push('centerBox');
				}
				if (layout?.align === 'left') {
					classNames.push('leftBox');
				}
				if (layout?.align === 'right') {
					classNames.push('rightBox');
				}

				if (this.fromType === 'tableCloumns') {
					classNames.push('tableCloumnsBox');
				}
				if (this.fromType === 'formItems') {
					classNames.push('formItemsBox');
				}
				if (this._type === 'upload' || this._type === 'textarea') {
					if (layout?.block != false) {
						classNames.push('blockBox');
					}
					if (layout?.fit != false) {
						classNames.push('fitBox');
					}
				}

				let className_raw = layout?.className;
				let className = [];
				if (typeof className_raw === 'function') {
					className =
						className_raw({
							row: this.formData,
							val: this._.cloneDeep(this.val),
							prop: this.prop,
							index: this.index,
						}) ?? [];
				} else if (Array.isArray(className)) {
					className = className_raw;
				} else {
					className = className_raw?.split(',');
				}
				let names = [];
				classNames?.map(item => {
					let name = item.toString().trim();
					if (!names.includes(name)) {
						names.push(name);
					}
					return name;
				});
				return names;
			},
			_slots() {
				if (this.Empty(this.itemConfig?.slot)) return [];
				let slots = [];
				if (typeof this.itemConfig.slot == 'function') {
					slots = this.itemConfig.slot({
						row: this.formData,
						val: this._.cloneDeep(this.val),
						prop: this.prop,
						index: this.index,
					});
				}
				if (typeof this.itemConfig.slot == 'string') {
					slots = this.itemConfig.slot.split(',');
				}
				if (Array.isArray(this.itemConfig.slot)) {
					slots = this.itemConfig.slot;
				}
				return slots;
			},

			_min() {
				return Number.isFinite(Number(this.prototype?.min))
					? Number(this.prototype?.min)
					: 0;
			},
			_max() {
				return Number.isFinite(Number(this.prototype?.max))
					? Number(this.prototype?.max)
					: Infinity;
			},
			_value() {
				if (typeof this.itemConfig?.value === 'function') {
					return this.itemConfig.value({
						row: this.formData,
						val: this._.cloneDeep(this.val),
						prop: this.prop,
						index: this.index,
					});
				} else if (typeof this.itemConfig?.value === 'object') {
					if (typeof this.itemConfig?.value?.value === 'function') {
						return this.itemConfig.value.value({
							row: this.formData,
							val: this._.cloneDeep(this.val),
							prop: this.prop,
							index: this.index,
						});
					} else {
						return this.itemConfig.value.value;
					}
				}

				return this.itemConfig.value;
			},
		},

		methods: {
			getKey(obj) {
				return (
					obj?.[this.itemConfig?.dict?.key] ??
					obj?.[this.itemConfig?.dict?.value] ??
					obj?.dictValue ??
					obj?.value
				);
			},
			getLabel(obj) {
				return (
					obj?.[this.itemConfig?.dict?.label] ??
					obj?.dictLabel ??
					obj?.label
				);
			},
			getValue(obj) {
				return (
					obj?.[this.itemConfig?.dict?.value] ??
					obj?.dictValue ??
					obj?.value
				);
			},
			getDisabled(obj) {
				return obj?.[this.itemConfig?.dict?.disabled] ?? obj?.disabled;
			},

			getTranslateDictLabel(list, key) {
				let itemConfig = list.find(e => this.getDictValue(e) === key);
				return this.getLabel(itemConfig);
			},
			hasOwnPrototype(obj, key) {
				if (typeof obj !== 'object') return false;
				return Reflect.has(obj, key);
			},
			getDictKey(dictItem) {
				if (
					Object.prototype.toString.call(dictItem) !==
					'[object Object]'
				) {
					return dictItem;
				} else {
					return this.getKey(dictItem);
				}
			},
			getDictLabel(dictItem) {
				if (
					Object.prototype.toString.call(dictItem) !==
					'[object Object]'
				) {
					return dictItem;
				} else {
					return this.getLabel(dictItem);
				}
			},
			getDictValue(dictItem) {
				if (
					Object.prototype.toString.call(dictItem) !==
					'[object Object]'
				) {
					return dictItem;
				} else {
					return this.getValue(dictItem);
				}
			},
			getDictDisabled(dictItem) {
				return this.getDisabled(dictItem) ?? false;
			},
			uploadEnd(result) {
				this.itemConfig?.uploadEnd?.(result);
			},
			getCheckboxState() {
				let value = this.val;
				let trues = [this.prototype.trueLabel, 1, '1'];
				let falses = [
					this.prototype.falseLabel,
					0,
					'0',
					undefined,
					null,
					'',
				];
				if (trues.includes(value)) {
					return true;
				} else if (falses.includes(value)) {
					return false;
				} else {
					return undefined;
				}
			},
			computedSelectLabel(dictList, value) {
				if (!this.notEmpty(value)) return '-';
				let values = '';
				if (Object.prototype.toString.call(value) == '[object Array]') {
					values = value;
				} else if (value?.includes?.(',')) {
					values = value?.toString?.().split(',');
				} else {
					values = [value?.toString?.()];
				}
				let word = undefined;
				let arr = [];
				if (
					Object.prototype.toString.call(dictList) ==
					'[object Function]'
				) {
					arr = dictList(this.formData, this.index);
				}
				if (
					Object.prototype.toString.call(dictList) == '[object Array]'
				) {
					arr = dictList;
				}
				if (arr?.length > 0) {
					if (this.itemConfig.array) {
						let items = arr.filter(e => {
							return values.includes(e);
						});
						word = items.reduce((prev, next) => {
							return `${prev ? prev : ''}${
								prev ? '，' : ''
							}${next}`;
						}, word);
					} else {
						let items = arr.filter(e => {
							return values.includes(
								this.getDictValue(e)?.toString?.(),
							);
						});
						word = items.reduce((prev, next) => {
							return `${prev ? prev : ''}${
								prev ? '，' : ''
							}${this.getLabel(next)}`;
						}, word);
					}
				}

				if (this.showErrorValue === true) {
					return word ?? value ?? '-';
				} else {
					return word ?? '-';
				}
			},
			thousands(val) {
				let price = Number(val);
				if (!Number.isFinite(price)) return '-';
				let fixed2 = (val * 1).toFixed(2);
				return !(fixed2 + '').includes('.')
					? // 就是说1-3位后面一定要匹配3位
					  (fixed2 + '').replace(/\d{1,3}(?=(\d{3})+$)/g, match => {
							return match + ',';
					  })
					: (fixed2 + '').replace(
							/\d{1,3}(?=(\d{3})+(\.))/g,
							match => {
								return match + ',';
							},
					  );
			},
			cb() {},
			async select_dialog() {
				if (!this.itemConfig?.selectDialogOptions) {
					return;
				}
				if (
					this.hasOwnPrototype(
						this.itemConfig.selectDialogOptions,
						'validate',
					)
				) {
					let pass = undefined;
					let validate =
						this.itemConfig.selectDialogOptions?.validate;
					if (typeof validate === 'function') {
						let fn = this.itemConfig.selectDialogOptions.validate?.(
							{
								row: this.formData,
								val: this._.cloneDeep(this.val),
								prop: this.prop,
								index: this.index,
							},
						);
						if (typeof fn === 'boolean') {
							pass = fn;
						} else if (
							Object.prototype.toString.call(fn) ===
							'[object Promise]'
						) {
							try {
								pass = await fn;
							} catch (error) {
								pass = false;
							}
						}
					}

					pass ??= false;
					if (pass === false) {
						return;
					}
				}
				this.$refs.selectDialogInput.blur();
				const SelectDialog = require('../template/index.js').default;
				SelectDialog(this.itemConfig?.selectDialogOptions).then(
					({ data, type }) => {
						this.itemConfig?.selectDialogOptions?.cb?.({
							data,
							row: this.formData,
							value: this._.cloneDeep(this.val),
							index: this.index,
							type,
							prop: this.prop,
						});
					},
				);
			},
			clear() {
				this.val = undefined;
				this.formData[this.itemConfig.propLabel] = undefined;
			},

			initWatcher() {
				this.watchValue();
				this.watchVal();
			},
			// 监听value赋值
			watchValue() {
				if (this.hasOwnPrototype(this.itemConfig, 'value')) {
					let deep = false;
					let immediate = false;
					if (typeof this.itemConfig?.value === 'object') {
						deep = !!this.itemConfig.value?.deep;
						immediate = !!this.itemConfig.value?.immediate;
					} else {
						if (typeof this._value === 'object') {
							deep = true;
						}
					}
					this.unwatch.value = this.$watch(
						`_value`,
						(val, oldVal) => {
							if (!Object.is(val, oldVal)) {
								this.formData[this.prop] = val;
							}
							// this.val = val;
						},
						{
							deep,
							immediate,
						},
					);
					if (this._type === 'text') {
						this.val = this._value;
					}
				}
			},
			// 监听watch方法
			watchVal() {
				let deep = false;
				let immediate = false;
				let handler = () => {};
				let _deep = false;
				let _immediate = false;
				if (this.hasOwnPrototype(this.itemConfig?.lifeHooks, 'watch')) {
					if (typeof this.itemConfig?.lifeHooks?.watch === 'object') {
						if (typeof this.val === 'object') {
							_deep = true;
						} else {
							_deep = false;
						}
						deep = this.itemConfig.lifeHooks?.watch?.deep ?? _deep;
						immediate =
							this.itemConfig.lifeHooks?.watch?.immediate ??
							_immediate;
						handler = this.itemConfig.lifeHooks?.watch?.handler;
					} else {
						handler = this.itemConfig.lifeHooks?.watch;
					}

					this.unwatch.val = this.$watch(
						`val`,
						(val, oldVal) => {
							handler({
								row: this.formData,
								val: this._.cloneDeep(val),
								oldVal: this._.cloneDeep(oldVal),
								index: this.index,
								prop: this.prop,
							});
						},
						{
							deep,
							immediate,
						},
					);
				}
			},
		},
		beforeCreate() {
			if (typeof this.itemConfig?.lifeHooks?.beforeCreate == 'function') {
				this.itemConfig?.lifeHooks?.beforeCreate({
					row: this.formData,
					val: this._.cloneDeep(this.val),
					prop: this.prop,
					index: this.index,
				});
			}
		},
		created() {
			if (this.val === null) {
				this.formData[this.prop] = undefined;
			}
			if (typeof this.itemConfig?.lifeHooks?.created == 'function') {
				this.itemConfig?.lifeHooks?.created({
					row: this.formData,
					val: this._.cloneDeep(this.val),
					prop: this.prop,
					index: this.index,
				});
			}
			this.initWatcher();
		},
		beforeMount() {
			if (typeof this.itemConfig?.lifeHooks?.beforeMount == 'function') {
				this.itemConfig?.lifeHooks?.beforeMount({
					row: this.formData,
					val: this._.cloneDeep(this.val),
					prop: this.prop,
					index: this.index,
				});
			}
		},
		mounted() {
			if (typeof this.itemConfig?.lifeHooks?.mounted == 'function') {
				this.itemConfig?.lifeHooks?.mounted({
					row: this.formData,
					val: this._.cloneDeep(this.val),
					prop: this.prop,
					index: this.index,
				});
			}
		},
		beforeUpdate() {
			if (typeof this.itemConfig?.lifeHooks?.beforeUpdate == 'function') {
				this.itemConfig?.lifeHooks?.beforeUpdate({
					row: this.formData,
					val: this._.cloneDeep(this.val),
					prop: this.prop,
					index: this.index,
				});
			}
		},
		updated() {
			if (typeof this.itemConfig?.lifeHooks?.updated == 'function') {
				this.itemConfig?.lifeHooks?.updated({
					row: this.formData,
					val: this._.cloneDeep(this.val),
					prop: this.prop,
					index: this.index,
				});
			}
		},
		activated() {
			if (typeof this.itemConfig?.lifeHooks?.activated == 'function') {
				this.itemConfig?.lifeHooks?.activated({
					row: this.formData,
					val: this._.cloneDeep(this.val),
					prop: this.prop,
					index: this.index,
				});
			}
		},
		deactivated() {
			if (typeof this.itemConfig?.lifeHooks?.deactivated == 'function') {
				this.itemConfig?.lifeHooks?.deactivated({
					row: this.formData,
					val: this._.cloneDeep(this.val),
					prop: this.prop,
					index: this.index,
				});
			}
		},
		beforeDestroy() {
			Object.values(this.unwatch).map(item => {
				item?.();
			});
			if (
				typeof this.itemConfig?.lifeHooks?.beforeDestroy == 'function'
			) {
				this.itemConfig?.lifeHooks?.beforeDestroy({
					row: this.formData,
					val: this._.cloneDeep(this.val),
					prop: this.prop,
					index: this.index,
				});
			}
		},
	};
</script>
<style lang="scss" scoped>
	.itemContent {
		height: 100%;
		--maxWidth: 300px;
		display: flex;
		::v-deep .el-date-editor {
			width: 100%;
			max-width: var(--maxWidth);
		}

		::v-deep .el-input {
			width: 100%;
			max-width: var(--maxWidth);
		}
		::v-deep .el-select {
			width: 100%;
			max-width: var(--maxWidth);
		}
		::v-deep .el-radio-group {
			height: 100%;
			.el-radio {
				height: 100%;
				.el-radio__input {
					line-height: 32px;
				}
				.el-radio__label {
					line-height: 32px;
				}
			}
		}
		::v-deep .el-textarea {
			width: 100%;
			max-width: var(--maxWidth);
		}
		::v-deep .el-input-number {
			width: 100%;
			max-width: var(--maxWidth);
			.el-input-number__decrease,
			.el-input-number__increase {
				display: none;
			}
			input {
				padding: 5px;
				text-align: left;
				width: 100%;
				max-width: var(--maxWidth);
			}
		}
	}
	.itemContent.fitBox {
		::v-deep .el-date-editor {
			max-width: none;
		}
		::v-deep .el-input {
			max-width: none;
		}
		::v-deep .el-select {
			max-width: none;
		}
		::v-deep .el-textarea {
			max-width: none;
		}
		::v-deep .el-input-number {
			max-width: none;
			.el-input-number__decrease,
			.el-input-number__increase {
				display: none;
			}
			input {
				padding: 5px;
				text-align: left;
				width: 100%;
				max-width: none;
			}
		}
	}
	.itemContent.centerBox {
		justify-content: center;
	}
	.itemContent.leftBox {
		justify-content: left;
	}
	.itemContent.rightBox {
		justify-content: right;
	}

	::v-deep div:empty::before {
		content: '-';
	}
	.textContent {
		overflow-wrap: break-word;
		word-wrap: break-word;
		word-break: break-all;
	}
</style>
